<!-- 特价酒店 -->
<template>
    <div class="box">
        <h2 class="acc-title">特价酒店</h2>
        <header class="acc-header-box">
            <ul class="acc-nav-list">
                <li class="acc-nav-item" v-for="(item1,index1) in speHotel" :key="index1" :class="{'active':index1 == count}" @click="changeSpeHotel(index1)">{{item1.navItem}}</li>
            </ul>
        </header>
        <ul class="item-img-box">
            <li class="item-img-item" v-for="(item2,index2) in speHotel[count].navList" :key="index2">
                <a href="#" class="item-link" >
                    <img class="item-link-img" :src="item2.img" width="240px" height="240px">
                    <div class="item-link-inf">
                        <span class="item-link-pl">{{item2.score}}分</span>
                        <span class="item-link-con">
                            <span>{{item2.hoteNameC}}</span>
                            <span style="font-size:12px">{{item2.hoteNameE}}</span>
                        </span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data () {
        return {
            count:0
        };
    },

    components: {},
    computed:{
        ...mapState(['speHotel'])
    },
    mounted(){
        this.$store.dispatch('reqSpeHotel')
    },
    methods: {
        changeSpeHotel(index){
            this.count = index
        }
    }
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .box
        width 1000px
        margin 0 auto 50px
        .acc-title
            text-align center
            font-size 24px
            font-weight normal
            color #333333
            margin 50px 0 25px
        .acc-header-box
            border-bottom 1px solid #e4e4e4
            .acc-nav-list
                display flex
                justify-content space-between
                color #666666
                font-size 18px
                text-align center
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;
                user-select: none;
                cursor pointer
                .acc-nav-item
                    line-height 50px
                    flex 1
                .active
                    color #ff8a00
                    border-bottom 3px solid #ff8d00
                    margin-bottom -2px
        .item-img-box
            padding 20px 0 
            display flex
            flex-wrap wrap
            justify-content space-between
            .item-img-item
                height 255px
                .item-link
                    .item-link-img
                        // position absolute
                    .item-link-inf
                        position relative
                        top -244px
                        left 0
                        display flex
                        flex-direction column
                        // align-items center
                        justify-content space-between
                        color #ffffff
                        background-color rgba(0,0,0,.2)
                        height 240px
                        .item-link-pl
                            font-size 18px
                            border-radius 4px
                            text-align center
                            background-color rgba(0,0,0,.5)
                            width 55px
                            line-height 25px
                            margin 15px
                        .item-link-con
                            font-size 18px
                            margin-bottom 15px
                            span 
                                display block
                                width 240px
                                font-size 14px
                                padding  0 15px
                                box-sizing border-box



</style>